<template>
  <common-page :title="info.status === 1 ? '上线申请' : '下线申请'">
    <el-button slot="header" @click="back">返回</el-button>
    <el-button
      slot="header"
      @click="submitForm"
      type="primary"
      :loading="buttonLoading"
      >保存</el-button
    >
    <div slot="content" class="asset-online">
      <div class="asset-online-title">{{ info.businessName }}</div>
      <div class="asset-online-container">
        <common-group-title style="padding-left: 18px" title="系统简介" />
        <div class="overview">{{ info.introduce }}</div>

        <common-group-title style="padding-left: 18px" title="负责人" />
        <div class="overview">{{ info.nickName }}</div>

        <common-group-title style="padding-left: 18px" title="资产明细" />
        <div class="assetsDetailed">
          <div class="assetsDetailed-table">
            <common-table
              class="assetsDetailed-table"
              :data="list"
              border
              height="100%"
              v-loading="loading"
            >
              <el-table-column
                prop="url"
                align="left"
                label="URL"
                show-overflow-tooltip
              />
              <el-table-column
                label="操作"
                align="left"
                width="80px"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-button type="text" @click="hanldeDetail(scope.row)"
                    >详情
                  </el-button>
                </template>
              </el-table-column>
            </common-table>
          </div>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="pageNum"
            :limit.sync="pageSize"
            @pagination="getList"
          />

          <el-form
            class="apply-form"
            ref="form"
            :model="form"
            :rules="rules"
            label-width="125px"
            @submit.native.prevent
          >
            <el-form-item
              :label="`${info.status === 1 ? '上线' : '下线'}API功能介绍`"
              prop="introduce"
            >
              <common-input
                v-model="form.introduce"
                placeholder="请输入"
                type="textarea"
                :maxlength="256"
                clearable
              />
            </el-form-item>
            <el-form-item label="包含敏感信息" prop="isSensitive">
              <el-radio-group v-model="form.isSensitive" @change="changeStatus">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="附件"
              prop="files"
              :rules="form.isSensitive === 1 ? rules.files : []"
            >
              <!-- <uploadFiles @change="changeFiles"></uploadFiles> -->
              <file-upload
                v-model="form.files"
                :fileSize="100"
                multiple
                :limit="10"
                ref="fileUpload"
                :fileType="['pdf']"
                acceptFiles=".pdf"
              ></file-upload>
            </el-form-item>
            <el-form-item label="申请理由" prop="applyReason">
              <common-input
                v-model="form.applyReason"
                placeholder="请输入"
                type="textarea"
                :maxlength="255"
                clearable
              />
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <detail ref="assetDetail"></detail>
  </common-page>
</template>

<script>
import {
  batchEdit,
  queryApiUrlList,
} from "@/api/apisecurity/apiinterface/interface";
import FileUpload from "@/components/FileUpload";
import Detail from "./detail";

export default {
  name: "index",
  components: {
    FileUpload,
    Detail,
  },
  props: {
    interfaceIds: {
      type: String,
      default: () => null,
    },
    info: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      title: "",
      dialogShow: false,
      list: [],

      buttonLoading: false,
      loading: false,
      status: null,
      form: {
        applyReason: "",
        introduce: "",
        isSensitive: 0,
        files: null,
      },
      rules: {
        isSensitive: [
          {
            required: true,
            message: "请选择是否包含敏感信息",
            trigger: "change",
          },
        ],
        introduce: [
          { required: true, message: "请输入API功能介绍", trigger: "blur" },
        ],
        files: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value && value.length) {
                callback();
              } else {
                callback(new Error("请选择文件"));
              }
            },
            trigger: "change",
          },
        ],
      },
      pageSize: 10,
      pageNum: 1,
      total: 0,
      initFileList: [],
      overLimit: false,
    };
  },
  methods: {
    changeStatus(val) {
      if (val === 0) {
        this.$refs.form.clearValidate(["files"]);
      }
    },
    back() {
      this.$emit("close");
    },

    getList() {
      let params = {
        interfaceIds: this.info.interfaceIds,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      };
      this.loading = true;
      queryApiUrlList(params)
        .then((res) => {
          if (res && res.code === 200) {
            this.list = res.rows;
            this.total = res.total;
          }
        })
        .finally(() => (this.loading = false));
    },
    submitForm() {
      this.form.files = this.$refs.fileUpload.$refs.upload.uploadFiles;
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const files = this.$refs.fileUpload.$refs.upload.uploadFiles;
          const formData = new FormData();
          formData.append("interfaceId", this.info.interfaceIds);
          formData.append("applyStatus", this.info.status);
          formData.append("applyReason", this.form.applyReason);
          formData.append("introduce", this.form.introduce);
          formData.append("isSensitive", this.form.isSensitive);
          if (files && files.length > 0) {
            try {
              files.forEach((item) => {
                this.overLimit = this.$refs.fileUpload.handleBeforeUpload(item);
                if (this.overLimit) throw Error("isOver");
              });
            } catch (e) {
              console.log(e);
            }

            if (this.overLimit) {
              return;
            }

            files.forEach((item) => {
              if (item.raw) {
                formData.append("files", item.raw);
              }
            });
          }
          this.buttonLoading = true;
          batchEdit(formData)
            .then((res) => {
              if (res && res.code === 200) {
                this.$GlobalSuccessMessage("操作成功");
                this.$emit("refresh");
              } else {
                this.$GlobalErrorConfirm("操作失败", res.msg);
              }
            })
            .finally(() => (this.buttonLoading = false));
        }
      });
    },

    hanldeDetail(row) {
      let params = {
        apiUrl: row.url,
        artificial: row.artificial,
      };
      this.$refs.assetDetail.showDetail(params);
    },
  },
  mounted() {
    this.rules.introduce[0].message = `请输入${
      this.info.status === 1 ? "上线" : "下线"
    }API功能介绍`;
    this.getList();
  },
};
</script>

<style scoped lang="scss">
::v-deep .global-common-edit-dialog-body {
  padding-top: 0;
}
.overview {
  width: 100%;
  padding: 0 28px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .item {
    width: 25%;
    display: flex;
    align-items: center;

    .item-label {
      max-width: calc(100% - 60px);
      word-break: keep-all;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      box-sizing: border-box;
    }
  }
}
.assetsDetailed {
  padding: 0 18px;

  .apply-form {
    margin-top: 18px;
  }

  .apply {
    margin-top: 18px;
    display: flex;
    align-items: flex-start;

    .label {
      width: 80px;
    }
  }
}

.asset-online {
  width: 65%;
  height: 100%;
  margin: 0 auto;
  padding-top: 20px;
  box-sizing: border-box;

  .asset-online-title {
    margin-bottom: 10px;
  }

  .asset-online-container {
    height: calc(100% - 50px);
    border: 1px solid #eee;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    overflow-y: scroll;

    .overview {
      color: #606266;
      font-size: 14px;
      word-wrap: break-word;
      word-break: break-all;
      white-space: pre-wrap !important;
    }

    .assetsDetailed-table {
      height: 300px;
      // max-height: 400px;
    }
  }
}
</style>
